<template>
  <bs-dialog :title="title" :visible.sync="editor" size="default" @closed="doCloseEdit" class="deviceDialog">
    <template slot="main">
    <!--点击统计走势图-->
      <div class="borcon clickStatistics">
        <div class="angle">
          <div class="angleleft"></div>
          <div class="anglerig"></div>
          <div class="anglelbot"></div>
          <div class="anglerbot"></div>
        </div>
        <div class="contit">{{ $t('点击统计走势图') }}</div>
        <div class="cons">
          <!-- <car-trend
            ref="carTrend"
            :series-data="seriesData"
            :legend-data="legendData"
            :y-axis-data="yAxisData"
            height="460px"
          ></car-trend> -->
      <!--点击统计走势图-->

        </div>
    </div>
      <template slot="footer">
      <bs-cancel-button-icon @click.native="doCloseEdit"></bs-cancel-button-icon>
      </template>

    </template>
  </bs-dialog>
</template>
<script>
import DeviceMonitorApi from '@/api/device'
// import CarTrend from '../../../dashboard/components/CarTrend'
export default {
  name: 'ClickStatisticsDialog',
  // components: { CarTrend},
  data() {
    return {
      queryData: { mac:'',corpCode:'DP' },
      editorForm: {},
      seriesData: [
        {
          name: '天',
          data: [],
          type: 'line',
          smooth: true,
        },
        {
          name: '周',
          data: [],
          type: 'line',
          smooth: true,
        },
        {
          name: '月',
          data: [],
          type: 'line',
          smooth: true,
        },
      ],
      legendData: ['天','周','月'],
      yAxisData: [],
      title:  this.$t('统计详情页'),
      editor: false,
    }
  },
  created() {
    this.$eventBus.$on('clickStatisticsDialogShow', this.show);
  },
  beforeDestroy() {
    this.$eventBus.$off('clickStatisticsDialogShow');
  },
  mounted() {
    this.$nextTick(() => {
      // this.init()
      //this.getInfo()
    })
  },
  methods: {
    // 显示
    show(form) {
        this.editor = true
        this.getInfo(form)
    },

    getInfo(mac) {
      // 点击统计走势
      this.queryData.mac = mac

      //var queryData = this.queryData

      this.$store.dispatch('device/doClickStatisticsData', this.queryData).then((res) => {
          if (res) {
            res.forEach(item => {
                if(item.daySum>0) {
                  this.seriesData[0].data.push(item.daySum)
                }
                if(item.weekSum>0) {
                  this.seriesData[1].data.push(item.weekSum)
                }
                if(item.monthSum>0) {
                  this.seriesData[2].data.push(item.monthSum)

                }
                this.yAxisData.push(item.pageName)
            })
            this.$refs.carTrend.refreshData(this.yAxisData, this.seriesData)
        }
      })
    },
    // 关闭
    doCloseEdit: function () {
      this.yAxisData = []
      this.seriesData = []
      this.$eventBus.$emit('closeDialog');
    },
  },
}
</script>
<style lang="scss" scoped>
.seamless-warp {
  width: 100%;
  height: 165px;
  overflow: hidden;
}
.input-radio {
  .el-radio {
    color: #1890ff !important;
  }
}
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #1890ff !important;
}
::v-deep .el-radio__inner {
  border: 1px solid #1890ff !important;
  background: inherit;
}
::v-deep.el-radio__inner:hover {
  border: 1px solid#1890ff !important;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
  border: 1px solid #1890ff !important;
  background: inherit !important;
}
::v-deep .el-radio__inner::after {
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background-color: #1890ff !important;
}
.list {
  width: 100%;
  border: 1px solid #999;
  position: relative;
  height: 160px;
  overflow: hidden;
}
.list .rowup {
  -webkit-animation: 10s rowup linear infinite normal;
  animation: 10s rowup linear infinite normal;
  position: relative;
}
</style>
